<template>
<div>
     <div class="editorContainer">
        <!-- <div class="editor-json" ></div> -->
    </div>
</div>
   
</template>
<script>
export default {
    props:{
        jsonData:String,
        default:''
    },
    data(){
        return {
            editor:null
        }
    },
    watch:{
        jsonData:function(){
            this.resetJson()
        }
    },
    mounted(){
        this.initEditor();  
    },
    methods:{
        resetJson(){
            this.editor.setValue(this.jsonData);
        },
        getJsonData(){
            return this.editor.getValue() || ''
        },
        initEditor(){
            let contentHeight = document.documentElement.clientHeight - 290;
            $('.editor-json').remove();
            $(".editorContainer").html(`<div class="editor-json" ></div>`);
            this.editor = null;
            let dom = $(`.editor-json`);
            $(dom).css({
                height:contentHeight 
            });
            for(let i = 0 ;i < dom.length ;i++){
                this.editor = monaco.editor.create(dom[i], {
                    value:this.jsonData,
                    language: 'json'
                });  
            }
            
        }
    }
}
</script>
<style lang="scss">
.editor-json{
    margin-left:1px;
    min-height:430px;
    border:1px solid rgb(204, 204, 204);
}
</style>
